<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-pop-preview ddp-type popup-prep-snapshot" *ngIf="isShow && !isCreateSourceMode">
  <!-- top -->
  <div class="ddp-ui-top">
    <div class="ddp-data-name ddp-cut" title="{{ selectedDataSnapshot.ssName }}">
      {{ selectedDataSnapshot.ssName }}
    </div>
    <em class="ddp-btn-popup-close" (click)="close()"></em>
  </div>
  <!-- //top -->
  <!-- contents -->
  <div class="ddp-ui-preview-contents ddp-type-preview">

    <!-- tab SUCCESS, PREPARING-->
    <!--<div class="ddp-type-top-option" *ngIf="selectedDataSnapshot.displayStatus==='SUCCESS' || selectedDataSnapshot.displayStatus==='PREPARING'">-->
      <!--<ul class="ddp-ui-tab ddp-type">-->
        <!--<li [ngClass]="{'ddp-selected' : currentTab === 0 }" (click)="onTabClick(0)">-->
          <!--<a href="javascript:">{{'msg.dp.ui.detail' | translate }}</a>-->
        <!--</li>-->
        <!--&lt;!&ndash;<li [ngClass]="{'ddp-selected' : currentTab === 1 }" (click)="onTabClick(1)">&ndash;&gt;-->
        <!--&lt;!&ndash;<a href="javascript:">log</a>&ndash;&gt;-->
        <!--&lt;!&ndash;</li>&ndash;&gt;-->
      <!--</ul>-->
    <!--</div>-->
    <!-- //tab -->

    <div class="ddp-layout-pop-contents ddp-wrap-snapshot ddp-padt0" *ngIf="selectedDataSnapshot.displayStatus==='SUCCESS'">

      <div class="ddp-wrap-tab-contents" [hidden]= "currentTab !== 0" >
        <!-- 요약 valid,mismatched,missing-->
        <div class="ddp-wrap-summary">
          <div class="ddp-data-summary">
            <span class="ddp-txt-label">{{'msg.dp.th.ss.valid' | translate}}</span>
            <span class="ddp-data-per">{{ valid }}</span>
          </div>
          <div class="ddp-data-summary ddp-mismatch">
            <span class="ddp-txt-label">{{'msg.dp.th.ss.mismatched' | translate}}</span>
            <span class="ddp-data-per">{{ mismatched }}</span>
          </div>
          <div class="ddp-data-summary ddp-missing">
            <span class="ddp-txt-label">{{'msg.dp.th.ss.missing' | translate}}</span>
            <span class="ddp-data-per">{{ missing }}</span>
          </div>
        </div>

        <div class="ddp-grid-label">
          <span class="ddp-txt-label">{{'msg.dp.ui.grid' | translate}}</span>
          <!--
              loading 시 ddp-load 추가
          -->
          <a href="javascript:" class="ddp-btn-bg " (click)="downloadSnapshot('csv')"
             *ngIf="snapshotUriFileFormat === 'csv' || selectedDataSnapshot.ssType === ssType.STAGING_DB">
            <em class="ddp-icon-link-down"></em>
            <em class="ddp-icon-spin-loading"></em>
            {{'msg.dp.btn.csv.download' | translate}}
          </a>
          <a href="javascript:" class="ddp-btn-bg "
             (click)="downloadSnapshot('json')"
             *ngIf="snapshotUriFileFormat === 'json' || selectedDataSnapshot.ssType === ssType.STAGING_DB">
            <em class="ddp-icon-link-down"></em>
            <em class="ddp-icon-spin-loading"></em>
            {{'msg.dp.btn.json.download' | translate}}
          </a>
          <a href="javascript:" class="ddp-btn-bg "
             (click)="downloadSnapshot('sql')"
             *ngIf="snapshotUriFileFormat === 'sql' || selectedDataSnapshot.ssType === ssType.STAGING_DB">
            <em class="ddp-icon-link-down"></em>
            <em class="ddp-icon-spin-loading"></em>
            {{'msg.dp.btn.sql.download' | translate}}
          </a>
        </div>
        <!-- //요약 -->
        <!-- grid -->
        <div class="ddp-wrap-grid">
          <div class="ddp-ui-empty" *ngIf="!selectedDataSnapshot.gridData">
            {{'msg.dp.ui.no.preview' | translate}}
          </div>
          <div *ngIf="selectedDataSnapshot.displayStatus==='SUCCESS'" class="ddp-box-gridarea" grid-component style="width:100%; height: 100%;"></div>
          <!--<div *ngIf="selectedDataSnapshot.status==='FAIL'" class="ddp-box-gridarea" style="width:100%; height: 100%;">-->
          <!--<p [innerHTML]="selectedDataSnapshot.custom.fail_msg">-->
          <!--</p>-->
          <!--</div>-->
        </div>
        <!-- //grid -->
      </div>

      <div class="ddp-wrap-tab-contents" [hidden]= "currentTab !== 1">
        <div class="ddp-data-log">
          <!--log-->
        </div>
      </div>
    </div>

    <div class="ddp-layout-pop-contents ddp-wrap-snapshot ddp-padt0" *ngIf="selectedDataSnapshot.displayStatus==='PREPARING'">
      <div class="ddp-wrap-tab-contents">
        <!-- progress (진행중) -->
        <div class="ddp-wrap-progress">
          <span class="ddp-data-status">{{'msg.dp.th.ss.generating' | translate}}</span>
          <!-- loading box -->
          <div class="ddp-box-loading ddp-pop ddp-progress">
            <span class="ddp-data-loading">{{'msg.dp.th.ss.generating-ss-table' | translate}} <strong>({{selectedDataSnapshot.ruleCntDone}}/{{selectedDataSnapshot.ruleCntTotal}})</strong></span>
            <a href="javascript:" class="ddp-btn-cancel" (click)="cancelClick(true)" >{{'msg.comm.btn.cancl' | translate}}</a>
            <!-- bar -->
            <div class="ddp-type-progressbar2" >
              <em class="ddp-data-progressbar" [ngStyle]="{'width': progressbarWidth}"></em>
            </div>
            <!-- //bar -->
          </div>
          <!-- //loading box -->
        </div>
        <!-- //progress -->
        <!-- progress (취소) -->
        <div class="ddp-wrap-progress" style="display:none;">
          <span class="ddp-data-status"><em class="ddp-icon-info"></em>{{'msg.dp.th.ss.generating' | translate}}</span>
          <!-- loading box -->
          <div class="ddp-box-loading ddp-pop ddp-progress ddp-disabled">
            <span class="ddp-data-loading">{{'msg.dp.th.ss.generating-ss-table' | translate}} ({{selectedDataSnapshot.ruleCntDone}}/{{selectedDataSnapshot.ruleCntTotal}})</span>
            <a href="javascript:" class="ddp-btn-cancel">{{'msg.comm.btn.cancl' | translate}}</a>
            <!-- bar -->
            <div class="ddp-type-progressbar2">
              <em class="ddp-data-progressbar" [ngStyle]="{'width': progressbarWidth}"></em>
            </div>
            <!-- //bar -->
          </div>
          <!-- //loading box -->

          <div class="ddp-box-loading ddp-pop ddp-cancel">

            <!-- buttons -->
            <div class="ddp-pop-buttons">
              <div class="ddp-txt-info">{{'msg.dp.ui.snapshot.cancel.confirm' | translate}}</div>
              <a href="javascript:" class="ddp-btn-line" (click)="cancelClick(false)">{{'msg.dp.ui.no' | translate }}</a>
              <a href="javascript:" class="ddp-btn-solid ddp-bg-black " (click)="cancelSnapshot()">{{'msg.dp.ui.yes' | translate }}</a>
            </div>
            <!-- //buttons -->

          </div>
        </div>
        <!-- //progress -->

      </div>

    </div>

    <div class="ddp-layout-pop-contents ddp-wrap-snapshot" *ngIf="selectedDataSnapshot.displayStatus==='FAIL'" >
      <div class="ddp-error-log">
        <div class="ddp-label-title">{{'msg.dp.ui.error.log' | translate }}</div>
        <div class="ddp-txt-log">
          <p [innerHTML]="selectedDataSnapshot.custom['fail_msg']">
          </p>
        </div>
      </div>
    </div>

    <!-- right -->
    <div *ngIf="ruleList" class="ddp-wrap-rules-flow ddp-snapshot">
      <!-- title -->
      <div class="ddp-box-title">
        <em class="ddp-data-num">{{ruleList?.length}}</em>
        {{'msg.dp.ui.rule.list' | translate}}
      </div>
      <!-- //title -->
      <div class="ddp-ui-rule-flow">
        <ul class="ddp-list-rule2">
          <li *ngFor="let rule of ruleList; let idx = index">
            <span class="ddp-data-type">
              <em class="ddp-ui-round">{{rule.alias}}</em>
              {{rule.name}}
            </span>
            <div class="ddp-ui-code"  title="{{idx !== 0 ? rule.ruleString : null}}">
              {{rule['simplifiedRule']}}
            </div>
        </ul>
      </div>
    </div>

    <div class="ddp-layout-pop-right ddp-detail">

      <!--이름-->
       <div class="ddp-view-title type-edit" [ngClass]="{'ddp-selected':isSsNameEditing}" (clickOutside)="changeSsNameEditingState(false)">
        <div class="ddp-ui-input">
          <input type="text" #ssName maxlength="50" (keyup.enter)="editSnapshotName()">
          <span class="ddp-btn-check" (click)="editSnapshotName()"></span>
        </div>
        <span class="ddp-txt-title">
          {{selectedDataSnapshot.ssName}}
          <a href="javascript:" class="ddp-link-edit" (click)="changeSsNameEditingState(true)"><em class="ddp-icon-edit2"></em></a>
        </span>
      </div>
      <!--이름-->

      <div class="ddp-view-contents-scroll">

        <!-- 상세 -->
        <div class="ddp-view-detail ddp-txt-cut">
          <dl class="ddp-dl-detail" *ngFor="let item of sSInformationList">
            <dt>
              {{item.label}}
            </dt>
            <dd *ngIf="item.isFileUri; else notFile" title="{{item.value}}">
              {{item.value}}
            </dd>
            <ng-template #notFile>
              <dd>
                {{item.value}}
              </dd>
            </ng-template>
          </dl>
        </div>
        <!-- //상세 -->

        <!-- info -->
        <div class="ddp-box-info">
          <dl class="ddp-dl-detail2">
            <dt>
              {{ 'msg.comm.menu.manage.prep.set' | translate }}
            </dt>
            <dd>
              <a href="javascript:" (click)="navigateDataflow(dfId)" class="ddp-link-data"><strong>{{ selectedDataSnapshot.dsName }}</strong> in {{ selectedDataSnapshot.dfName }} </a>
              <div class="ddp-ui-sub">
                <span class="ddp-data-sub">{{'msg.comm.ui.list.created' | translate}} <em class="ddp-data-result">{{selectedDataSnapshot.dsCreatedTime | mdate:'YYYY-MM-DD HH:mm'}}</em></span>
                <span class="ddp-data-sub">{{'msg.comm.ui.list.updated' | translate}} <em class="ddp-data-result">{{selectedDataSnapshot.dsModifiedTime | mdate:'YYYY-MM-DD HH:mm'}}</em></span>
              </div>
            </dd>
            <dt>
              {{'msg.dp.th.origin.imported.ds' | translate}}
            </dt>
            <dd>

              <div class="ddp-ui-sub" *ngIf="originDsInfo.dsName">
                <span class="ddp-data-sub">{{'msg.board.th.datasource' | translate}} <em class="ddp-data-result">{{ originDsInfo.dsName }}</em></span>
              </div>
              <div class="ddp-ui-sub" *ngIf="originDsInfo.qryStmt">
                <span class="ddp-data-sub">{{'msg.dp.th.query.stmt' | translate}} <em class="ddp-data-result">{{ originDsInfo.qryStmt }}</em></span>
              </div>
              <div class="ddp-ui-sub" *ngIf="originDsInfo.storedUri">
                <span class="ddp-data-sub">{{'msg.dp.th.file.path' | translate}} <em class="ddp-data-result">{{ originDsInfo.storedUri }}</em></span>
              </div>
              <div class="ddp-ui-sub" *ngIf="originDsInfo.createdTime">
                <span class="ddp-data-sub">{{'msg.comm.ui.list.created' | translate}} <em class="ddp-data-result">{{originDsInfo.createdTime | mdate:'YYYY-MM-DD HH:mm'}}</em></span>
              </div>
            </dd>
          </dl>
        </div>
        <!-- //info -->
      </div>
      <div class="ddp-view-buttons" *ngIf="isEnableCreateDatasource">
        <a href="javascript:" class=" ddp-btn-pop ddp-bg-black" (click)="createDatasource()"><em class="ddp-icon-add2"></em>{{'msg.storage.btn.create.source' | translate}}</a>
      </div>
    </div>
    <!-- //right -->
  </div>
  <!-- //contents -->
</div>
<!-- create data source popup -->
<app-create-data-source *ngIf="isCreateSourceMode"
                        [step]="'snapshot-configure'"
                        [sourceData]="sourceData"
                        (sourceCreateClose)="closedSourceCreate()"></app-create-data-source>
